<template>
	<view>
		<view class="tabs">
			<view :class="classTab0" @click="changeTab(0)">
				开票信息
			</view>
			<view :class="classTab1" @click="changeTab(1)">
				审批记录
			</view>
		</view>

		<uni-section title="审批记录" type="line" padding class="wf" v-show="tabIndex===1">
			<!-- <uni-steps :options="ApprovalData" active-color="#007AFF" :active="active" direction="column" /> -->
			<view class="tree" v-for="(item ,index) in ApprovalData" :index="index" :key="index"
				style="overflow: hidden;">
				<view class="treeimg">
					<view class="xian" v-show="ApprovalData.length>index+1">&nbsp</view>
					<view :class="ApprovalData.length>index+1?'quan':'quan1'">&nbsp</view>
				</view>
				<view class="treetxt">
					<view :class="ApprovalData.length>index+1?'treetitle':'treetitle1'">{{item.Title}}</view>
					<view class="treeusr">{{item.UserName}}{{item.State==="Finished"?"已完成":"已驳回"}}
						{{item.FinishTime.slice(0, -4)}}
					</view>
					<view class="treedt">{{item.Comment}}</view>

					<view class="treedt">{{item.StartTime.slice(0, -4)}}</view>
				</view>
			</view>
		</uni-section>

		<uni-table ref="table" border stripe style="margin-top:40px" v-show="tabIndex===0">
			<uni-tr>
				<uni-th width="80" align="center">客户名称</uni-th>
				<uni-td>{{entity.CusName}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">购买方</uni-th>
				<uni-td>{{entity.TicketbuyerName}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">税号</uni-th>
				<uni-td>{{entity.TaxRegcode}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">开户行</uni-th>
				<uni-td>{{entity.Accbank}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">地址</uni-th>
				<uni-td>{{entity.CusAddress}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">说明</uni-th>
				<uni-td>{{entity.Memo}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">收票人</uni-th>
				<uni-td>{{entity.PayeeUserName}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">手机号</uni-th>
				<uni-td>{{entity.PayeeUserPhone}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">收票地址</uni-th>
				<uni-td>{{entity.PayeeUserAddres}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">价税合计</uni-th>
				<uni-td>{{parseFloat(entity.Amountincludingtax).toFixed(2)}}</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">备注</uni-th>
				<uni-td>{{entity.Remark}}</uni-td>
			</uni-tr>
		</uni-table>

		<uni-table ref="table" border stripe emptyText="暂无更多数据" style="margin-top:10px;margin-bottom:60px"
			v-show="tabIndex===0">
			<uni-tr>
				<uni-th width="50" align="center">序号</uni-th>
				<uni-th width="150" align="center">货物编码</uni-th>
				<uni-th align="center">货物名称</uni-th>

				<uni-th align="center">开票使用名称</uni-th>
				<uni-th align="center">基本售价</uni-th>
				<uni-th align="center">加成率</uni-th>
				<uni-th align="center">开票价格</uni-th>
				<uni-th align="center">数量</uni-th>
				<uni-th align="center">金额</uni-th>
				<uni-th align="center">税率</uni-th>
				<uni-th align="center">税额</uni-th>
			</uni-tr>
			<uni-tr v-for="(item ,index) in entity.Details" :index="index" :key="index">
				<uni-td align="center">{{index+1}}</uni-td>
				<uni-td>{{ item.InventoryCode }}</uni-td>
				<uni-td>{{ item.InventoryName }}</uni-td>

				<uni-td>{{ item.InvoicingName }}</uni-td>
				<uni-td align="right">{{ item.InventoryPrice }}</uni-td>
				<uni-td align="right">{{ item.Markup +'%'}}</uni-td>
				<uni-td align="right">{{ item.InvoicingPrice }}</uni-td>
				<uni-td align="right">{{ item.InvoicingQuantity }}</uni-td>
				<uni-td align="right">{{parseFloat(item.InvoicingAmount).toFixed(2)}}</uni-td>
				<uni-td align="right">{{ item.TaxRate +'%'}}</uni-td>
				<uni-td align="right">{{ item.TaxAmount }}</uni-td>
			</uni-tr>
		</uni-table>
		<view style="height: 20px;">

		</view>
		<view class="footer" v-show="this.State==='ToDo'">
			<button type="primary" @click="inputDialogToggle(0)">同意</button>
			<button type="warn" @click="inputDialogToggle(1)">驳回</button>
		</view>

		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="审批意见" value="" placeholder="请输入审批意见"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserId: '',
				InstanceId: '',
				Zhu: {},
				entity: {},
				State: '',
				active: 1,
				classTab0: 'act',
				classTab1: '',
				tabIndex: 0,
				ApprovalData: [],

			}
		},
		onLoad(option) {
			let json = JSON.parse(option.obj)
			this.State = json.State
			this.InstanceId = json.InstanceId
			if (json.ApprovalType === '开票审批') {
				this.getDatalist(json.No)
			} else {
				this.getTPlist(json.No)
			}
			this.Zhu = json;
			this.UserId = option.Id
		},

		methods: {
			changeTab(val) {
				this.tabIndex = val
				this.classTab0 = ''
				this.classTab1 = ''
				if (val === 0) {
					this.classTab0 = 'act'
				} else {
					this.classTab1 = 'act'
					this.$http('/InvoiceManagement/Inv_InvoiceApplyMain/Open?InstanceId=' + this.InstanceId).then(res => {
						// console.log("<<<res<<<"+JSON.stringify(res));
						if (res.Success) {
							this.ApprovalData = res.Data
							// 	// this.Adata(res.Data)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})

				}
			},

			inputDialogToggle(e) {
				this.$refs.inputDialog.open(e)
				this.Zhu.State = e
			},

			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {

				setTimeout(() => {
					this.Zhu.Comment = val
					console.log('<<<<<<<<<<<<<<<<<<<,,<<' + JSON.stringify(this.Zhu.ApprovalType))
					if (this.Zhu.ApprovalType === "开票审批") {
						this.$http('/InvoiceManagement/Inv_InvoiceApplyMain/ApprovalSubmission', {
								"ApplicationFormId": this.Zhu.No,
								"Id": this.Zhu.Id,
								"InstanceId": this.Zhu.InstanceId,
								"State": this.Zhu.State,
								"UserId": this.UserId,
								"TemplateId": this.Zhu.TemplateId,
								"Comment": this.Zhu.Comment
							})
							.then(
								res => {
									console.log(res);
									if (res.Success) {
										this.entity = res.Data
									} else {
										uni.showToast({
											icon: 'none',
											title: res.Msg,
										})
									}
								})
					}
					if (this.Zhu.ApprovalType === "退票审批") {
						this.$http('/InvoiceManagement/Inv_ReturnTicketMain/ApprovalSubmission', {
								"ApplicationFormId": this.Zhu.No,
								"Id": this.Zhu.Id,
								"InstanceId": this.Zhu.InstanceId,
								"State": this.Zhu.State,
								"UserId": this.UserId,
								"TemplateId": this.Zhu.TemplateId,
								"Comment": this.Zhu.Comment
							})
							.then(
								res => {
									console.log(res);
									if (res.Success) {
										this.entity = res.Data
									} else {
										uni.showToast({
											icon: 'none',
											title: res.Msg
										})
									}
								})
					}
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					uni.navigateBack();
				}, 500)
			},
			getDatalist(No) {
				this.$http('/InvoiceManagement/Inv_InvoiceApplyMain/GetInvoicingInformation?Id=' + No)
					.then(res => {
						if (res.Success) {
							this.entity = res.Data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
			},
			getTPlist(No) {
				this.$http('/InvoiceManagement/Inv_ReturnTicketMain/GetReturnTicketDetail?Id=' + No)
					.then(res => {
						if (res.Success) {
							this.entity = res.Data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
			},
			Adata(res) {
				this.ApprovalData = [{
					title: res[0].Title,
					desc: res[0].StartTime
				}, {
					title: res[1].Title,
					desc: res[1].StartTime
				}, ]
			}
		},
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.tabs {
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}

	.tabs view {
		float: left;
		width: 49%;
		text-align: center;
		background: rgb(245, 247, 250);
		color: #888;
		border-bottom: 1px solid #ccc
	}


	.act {
		color: #333 !important;
		background: #fff !important;
		/* border:1px solid #ccc; */
		border-bottom: 1px solid #f5f5f5 !important;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		box-shadow: 0 -2px 5px #ccc;
		background: #fff;
		z-index: 9999;
		overflow: hidden;
		padding-left: 36vw;
	}

	.footer button {
		float: left;
		width: 30vw;
		margin: 2px
	}

	.wf {
		margin-top: 40px
	}

	.treeimg {
		float: left;
		width: 20vw;
		height: 100px;
	}

	.treetxt {
		float: left;
		width: 60vw;
	}

	.treetitle {
		font-size: 18px;
		color: #333
	}

	.treetitle1 {
		font-size: 18px;
		color: royalblue;
		font-weight: 600;
	}

	.treeusr {
		/* font-size: 12px; */
		color: #666;
		margin-top: 4px;
	}

	.treedt {
		/* font-size: 12px; */
		color: #666;
		margin-top: 4px;
	}

	.xian {
		height: 100px;
		width: 1.5px;
		background: #bdbdbd;
		margin: 0 auto
	}

	.quan {
		display: block;
		margin-top: -100px;
		margin-left: 31.5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #bdbdbd;
	}

	.quan1 {
		display: block;
		margin-left: 31.5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: royalblue;
	}
</style>